<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <title>Carousel Template for Bootstrap</title>
		<%@ include file="../headcfg.jsp" %>
	
	   
	    <!-- Custom styles for this template -->
	    <link href="${ctxResources}/bootstrap3/css/carousel.css" rel="stylesheet">
		<style id="holderjs-style" type="text/css"></style>
		<style type="text/css">
		.loginContainer{
			width:250px;
			height:200px;
			position:absolute;
			margin-left:-125px;
			top:160px;
			left:50%;
			z-index:10000;
			color: white;
		}
		</style>
		<script type="text/javascript">
		function sSize(){
			$('.carousel').height($(window).height());
			$('.carousel .item').height($(window).height());
			$('.carousel-inner > .item > img').height($(window).height());
		}
		$(window).resize(sSize);
		$(document).ready(function(){
			sSize();
		});
		</script>
	</head>
	<body>
	    <div class="navbar-wrapper">
	      <div class="container">
	
	        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
	          <div class="container">
	            <div class="navbar-header">
	              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	                <span class="sr-only">Toggle navigation</span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	              </button>
	              <a class="navbar-brand" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Project name</a>
	            </div>
	            <div class="navbar-collapse collapse">
	              <ul class="nav navbar-nav">
	                <li class="active"><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Home</a></li>
	                <li><a href="http://v3.bootcss.com/examples/carousel/#about">About</a></li>
	                <li><a href="http://v3.bootcss.com/examples/carousel/#contact">Contact</a></li>
	                <li class="dropdown">
	                  <a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	                  <ul class="dropdown-menu">
	                    <li><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Action</a></li>
	                    <li><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Another action</a></li>
	                    <li><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Something else here</a></li>
	                    <li class="divider"></li>
	                    <li class="dropdown-header">Nav header</li>
	                    <li><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Separated link</a></li>
	                    <li><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">One more separated link</a></li>
	                  </ul>
	                </li>
	              </ul>
	            </div>
	          </div>
	        </div>
			
	      </div>
	    </div>
	
	
	    <!-- Carousel
	    ================================================== -->
	    <div id="myCarousel" class="carousel slide" data-ride="carousel">
	      <!-- Indicators -->
	      <ol class="carousel-indicators">
	        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
	        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
	        <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
	      </ol>
	      <div class="carousel-inner">
	        <div class="item">
	          <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First " src="">
	          <div class="container">
	            <div class="carousel-caption">
	              <!-- -->
	            </div>
	          </div>
	        </div>
	        <div class="item">
	          <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:DongSongling" alt="Second slide" src="">
	          <div class="container">
	            <div class="carousel-caption">
	             <!-- -->
	            </div>
	          </div>
	        </div>
	        <div class="item active">
	          <img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="">
	          <div class="container">
	            <div class="carousel-caption">
					<!-- -->
	            </div>
	          </div>
	        </div>
	      </div>
	      <a class="left carousel-control" href="http://v3.bootcss.com/examples/carousel/#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
	      <a class="right carousel-control" href="http://v3.bootcss.com/examples/carousel/#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
	    </div><!-- /.carousel -->
		<div class="loginContainer">
			<form class="form-signin" action="${ctx }/login" method="post" role="form">
				<h2 class="form-signin-heading">Please sign in</h2>
				<input type="text" name="username" class="form-control" placeholder="Email address" required="" autofocus="">
				<input type="password" name="password" class="form-control" placeholder="Password" required="">
				<label class="checkbox">
				<input type="checkbox" name="rememberMe" value="true"> Remember me
				</label>
				<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
			</form>
	   </div>
	    <!-- Bootstrap core JavaScript
	    ================================================== -->
	    <!-- Placed at the end of the document so the pages load faster -->
	    <script src="${ctxResources}/bootstrap3/plugins/holder.min.js"></script>
	</body>
</html>